<template>
  <div class="center-setting publicServe" style="display:unset;padding:0;">
    <a-page-header title="返回" @back="() =>{this.$router.go(-1)} " />
    <TitleCard
      :title="'个人信息'"
      :showMore="false"
      :loading="loading"
      :isEmpty="isEmpty"
      :isSwitch="false"
      :type="'threeCard'"
    >
      <template slot="rightOperation">
        <div class="btn-wrap" style="margin-bottom:5px;">
          <a-button style="margin-right:10px;" class="btn-item" @click="showEditModal">修改信息</a-button>
          <a-button class="btn-item" @click="showModal">修改密码</a-button>
        </div>
      </template>
      <div class="info-box">
        <!-- <UserInfos ref="userInfos" :infos="info"></UserInfos> -->

        <div style="display:flex;">
          <ImageVue :width="'100px'" :height="'100px'" :cover="data.avatar" />
          <div class="info grid">
            <span>用户名： {{ data.userName }}</span>
            <span>昵称： {{ data.nickName}}</span>
            <span>邮箱： {{ data.email }}</span>
            <span>性别： {{ data.sex == 0 ? '男' :'女' }}</span>
            <span>联系方式： {{ data.phonenumber || '-' }}</span>
            <span>账号创建时间： {{ data.createTime.split(' ')[0] }}</span>
            <a href="#" @click="enterCollect">
              <span>我的收藏：查看全部</span>
            </a>
          </div>
        </div>
      </div>
      <Modal v-if="isShowEdit" @cancel="cancel" @addSuccess="addSuccess"></Modal>
      <a-modal v-model="EditModal" title="修改信息" :footer="null">
        <a-form-model ref="ruleForm" :model="editForm" v-bind="layout">
          <a-form-model-item ref="userName" label="用户名" prop>
            <a-input
              v-model="editForm.userName"
              @blur="
              () => {
                $refs.userName.onFieldBlur();
              }
            "
            />
          </a-form-model-item>
          <a-form-model-item ref="nick" label="昵称" prop>
            <a-input
              v-model="editForm.nickName"
              @blur="
              () => {
                $refs.nick.onFieldBlur();
              }
            "
            />
          </a-form-model-item>
          <a-form-model-item ref="email" label="邮箱" prop>
            <a-input
              v-model="editForm.email"
              @blur="
              () => {
                $refs.email.onFieldBlur();
              }
            "
            />
          </a-form-model-item>
          <a-form-model-item ref="phone" label="联系方式" prop>
            <a-input
              v-model="editForm.phonenumber"
              @blur="
              () => {
                $refs.phone.onFieldBlur();
              }
            "
            />
          </a-form-model-item>
          <a-form-item label="性别">
            <a-radio-group v-model="editForm.sex">
              <a-radio-button value="0">男</a-radio-button>
              <a-radio-button value="1">女</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-form-model>
        <div class="btnClass">
          <a-button @click="editCancel" class="cancel commonBtn">取消</a-button>
          <a-button type="primary" class="commonBtn" @click="confirmClick">确认</a-button>
        </div>
      </a-modal>
    </TitleCard>
  </div>
</template>

<script>
// import UserInfos from '../../backstageSupport/components/userInfos'
import { comapnyInfo, personInfo } from '../configs/accountDetail'
import Modal from './editPsw.vue'
import { getSelfIfo, editUserInfo } from '@/api/accountInfos'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import ImageVue from '../components/image.vue'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      comapnyInfo,
      personInfo,
      curComponents: '',
      title: '',
      info: [],
      id:'',
      isShowEdit: false,
      loading: false,
      isEmpty: false,
      EditModal: false,
      editForm: {},
      data: {},
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      }
    }
  },
  components: {
    Modal,
    ImageVue
  },
  created() {
    this.id = JSON.parse(localStorage.getItem('userId'))

    this.initSetting(this.id)
  },
  methods: {
    async initSetting(id) {
      const { data, msg, code } = await getSelfIfo(id)
      if (code !== 200) return this.$message.warning(msg)
      this.data = data
    },
    cancel() {
      this.isShowEdit = false
    },
    addSuccess() {
      this.isShowEdit = false
    },
    showModal() {
      this.isShowEdit = true
    },
    enterCollect() {
      this.$router.push({
        path: '/collect'
      })
    },
    showEditModal() {
      let obj = this.data
      this.editForm = {
        userName:obj.userName,
        nickName: obj.nickName,
        email: obj.email,
        sex: obj.sex,
        phonenumber: obj.phonenumber || '',
        weixin: obj.weixin || ''
      }
      this.EditModal = true
    },
    editCancel() {
      this.EditModal = false
    },
    async confirmClick() {
      // this.editForm.userName = this.editForm.email
      let {code,msg} = await editUserInfo(this.editForm)
      if(code == 200){
        this.$message.info('修改信息成功')
        this.initSetting(this.id)
        this.EditModal = false
      }else{
        this.$message.info(msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  // grid-gap: 10px;
}
.info-box {
  padding: 10px;
  width: 100%;
  background: #ededed;
  font-size: 18px;
  .info {
    flex: 1;
    margin-left: 20px;

    span {
      display: block;
      height: 55px;
      // margin-right:20px;
      // width: 50px;
    }
  }
  .info2 {
    margin-left: 130px;
    height: 90px;
  }
}
::v-deep .ant-modal-title {
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}
::v-deep .ant-modal-header {
  border: none;
}
.btnClass {
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  .ant-btn {
    background: #2d5acb;
    color: #fff;
    margin: 0 10px;
    border: 1px solid #2d5acb;
  }
}
</style>
